<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="cvs" width="600" height="600"></canvas>
	</body>
	
	<script type="text/javascript">
		
		window.onload = function(){
			// 获取画板
			let cvs = document.querySelector('#cvs')
			//检测画笔是否支持
			if(!cvs.getContext) {
				console.log('浏览器版本过旧')
				return 0
			}
			
			//创建绘制对象 2D
			let ctx = cvs.getContext('2d')
			
			// 配置样式
			//边框颜色
			ctx.strokeStyle = 'red'
			//描边样式
			ctx.lineWidth = 3
			//连接处的样式
			ctx.lineJoin = 'round'
			
			
			//绘制矩形
			/*
			ctx.strokeRect() //空心矩形
			ctx.fillRect()	//实心矩形
			ctx.clearRect()	//清除矩形
			*/
			ctx.strokeRect(100,100,100,100)
			
			//填充颜色
			ctx.fillStyle = '#F08080'
			ctx.fillRect(200,200,100,100)	//实心矩形
		}
		
		
	</script>
	
	<style type="text/css">
		/* 让canvas更有辨识度 */
		#cvs {
			border: 1px #F08080 solid;
		}
	</style>
</html>
